<template>
    <div class="fy-menu-component">
        <vxe-menu v-model="selectNav" :options="navList" @click="clickEvent">
        </vxe-menu>
    </div>
</template>

<script>
import { menus } from './index'
export default {
    name: 'FyMenuComponent',
    components: {},
    props: [''],
    data() {
        return {
            selectNav: '',
            navList: menus.map(item => ({ ...item, name: item.id, title: item.label }))
        };
    },


    computed: {},

    created() { },

    mounted() { },

    methods: {
        clickEvent({ menu }) {
            const { name, params, query } = this.$route
            if (query.menuFormId && query.menuFormId === menu.id) {
                this.$emit('refresh', menu)
                return
            }
            this.$router.replace({ name, params, query: { menuFormId: menu.id } })
        }
    },

}

</script>
<style lang='scss' scoped>
.fy-menu-component {
    width: 100%;
    height: 100%;
    box-shadow: 0 1px 1px #ccc;
}
</style>